<script setup>
import {ref} from "vue";
import {Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import request5151 from "../../../utils/request5151.js";
import {useRouter} from "vue-router";

const router = useRouter()
//定义websocket
let websocket = null;
if ('WebSocket' in window) {
  // 创建WebSocket连接
  websocket = new WebSocket('ws://localhost:5151/ws/' + "qr");
}
//连接发生错误
websocket.onerror = function (event) {
  console.log('连接错误');
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
  console.log('WebSocket连接成功');
};

//接收到消息的回调方法
websocket.onmessage = function (event) {
  router.push(event.data)
  ElMessage.success('报到成功')
}

//连接关闭的回调方法
websocket.onclose = function () {
  console.log("WebSocket连接关闭")
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
  websocket.close();
}
//现场照片
const myNowPhoto = ref()
//现场照片弹框
const nowPhotoDialogVisible = ref(false)
//二维码弹框
const QRDialogVisible = ref(false)
const nowPhoto = () => {
  nowPhotoDialogVisible.value = true
}
//二维码路径
const QRcode = ref()
//获取二维码
const QR = () => {
  QRDialogVisible.value = true
  request5151({
    url: '/generateQRCode',
    method: 'get',
    params: {
      textOrUrl: 'http://502740b8.r8.cpolar.top/afterScan'
    }
  }).then((res) => {
    QRcode.value = res.data
  }).catch((err) => {
    ElMessage.error(err)
  })
}
// 上传前
const beforeAvatarUpload = (file) => {
  return new Promise(async (resolve, reject) => {
    request5151({
      url: '/faceDetect',
      method: 'post',
      data: {
        file: file
      },
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }).then((res) => {
      if (res.data.code === 500) {
        ElMessage.error(res.data.message)
        reject()
      }
      resolve()
    }).catch((err) => {
      ElMessage.error(err)
      reject()
    })
  })
}
//确认按钮是否显示
const isShow = ref(false)
// 上传成功
const handleAvatarSuccess = (res) => {
  myNowPhoto.value = res.data
  ElMessage.success('上传成功')
  isShow.value = true
}
// 确认
const OK = () => {
  router.push('/reportAll/messageCollect')
}
</script>

<template>
  <div class="filedReport_All">
    <el-card style="text-align: center;margin-top: 50px;">
      <h2>选择你的现场报道方式</h2>
      <el-card>
        <el-button type="success" @click="nowPhoto">现场面部照片</el-button>
        <el-button type="success" @click="QR">扫码报道</el-button>
      </el-card>
    </el-card>
    <!--  弹框一-->
    <el-dialog v-model="nowPhotoDialogVisible" title="上传您的现场面部照片" width="30%">
      <el-upload
          class="avatar-uploader"
          action="http://localhost:5151/upload"
          :auto-upload="true"
          name="file"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
      >
        <img :src="myNowPhoto" v-if="myNowPhoto" class="avatar" alt="1"
             style="width: 100px;height: 100px;"/>
        <el-icon v-else class="avatar-uploader-icon">
          <Plus/>
        </el-icon>
      </el-upload>
      <el-button type="primary" @click="OK" style="margin-top: 20px;"
                 v-show="isShow"
      >确认
      </el-button>
      <br>
    </el-dialog>

    <!--弹框二-->
    <el-dialog v-model="QRDialogVisible" title="请扫描二维码" width="30%">
      <img :src="QRcode" alt="" style="width: 200px;height: 200px;">
    </el-dialog>
  </div>
</template>

<style scoped>
.avatar-uploader {
  border: 2px solid black;
  width: 100px;
  height: 100px;
}

.avatar-uploader-icon {
  margin: 40px;
}
</style>
